<template>
	<view class="container">
		<view class="people">
			<view class="message-box" v-for="(item,index) in messageList" :key="index" @click="goDetail(item.merchant.id)">
				<image :src="item.merchant.logo" mode="" class="shop-img"></image>
				<view class="message-content">
					<view class="">
						<text class="shop-title">{{item.merchant.title}}</text> <text class="time">{{item.created_at |formatDate }}</text>
					</view>
					<view class="message">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		messageList
	} from "@/api/message";
	import moment from '@/utils/moment';
	export default {
		data() {
			return {
				messageList: [],
			}
		},
		onLoad(option) {
			this.$post(`${messageList}`, {
				userId: uni.getStorageSync('userInfo').id
			}).then(r => {
				if (r.code == 200) {
					console.log(r.data)
					this.messageList = r.data;
				}
			})
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/message/messageDetail?id=' + id
				})

			}
		},
		filters: {
			formatDate: function (value) {
				return moment(value*1000).format('MM-DD HH:mm');
			}
		}
	}
</script>

<style scoped>
	.message-box {
		padding: 20upx 0upx 20upx 32upx;
		border-top: 1px solid #f1f1f1;
		background: #fff;
	}

	.shop-img {
		width: 110upx;
		height: 110upx;
		border-radius: 60upx;
		vertical-align: middle;
	}

	.message-content {
		width: 77%;
		display: inline-block;
		vertical-align: middle;
		margin-left: 20upx;
	}

	.time {
		float: right;
	}

	.shop-title {
		font-weight: 700;
		color: #000;
	}

	.message {
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
